<template>
	<div class="w-h-100 pos-r flex-1" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex" style="box-sizing: border-box; padding: 6px">
			<div style="box-sizing: border-box">
				<v-search :search-arr="searchObjArr" @submit="searchHandle">
					<el-button type="primary" icon="ele-Plus" @click="() => addHandle()">
                        新增类型
					</el-button>
				</v-search>
			</div>
			<div style="box-sizing: border-box; margin-top: 8px" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="hover">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100" style="">
									<el-table :data="list" border class="w-h-100" v-loading="loading">
										<el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
										<el-table-column prop="name" label="类型名称" align="center"/>
										<el-table-column prop="code" label="唯一编码" align="center" :showOverflowTooltip="true" />
										<el-table-column prop="sort" label="排序" align="center"/>
										
										<el-table-column prop="remark" label="备注" align="center"/>
										<el-table-column prop="status" label="状态" align="center">
											<template #default="scope">
												{{ getStatusVal(scope.row.status ) }}
											</template>
										</el-table-column>
										<el-table-column prop="name" label="操作" align="center" width="220">
                                            <template #default="scope">
                                                <el-button icon="ele-Document" size="small" text type="primary" @click="() => dicDataHandle(scope.row)">
													字典
												</el-button>
												<el-button icon="ele-Edit" size="small" text type="primary" @click="() => addHandle(scope.row)">
													编辑
												</el-button>
                                                <el-popconfirm
													confirm-button-text="确认"
													cancel-button-text="取消"
													icon="InfoFilled"
													icon-color="#626AEF"
													title="删除这条数据?"
													@confirm="deleteHandle(scope.row)"
												>
													<template #reference>
														<el-button icon="ele-Delete" size="small" text type="danger"> 
                                                            删除 
                                                        </el-button>
													</template>
												</el-popconfirm>
                                            </template>
                                        </el-table-column>
										
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<v-dic-form ref="formRef" @submit="(param: any) => submitHandle(param)"> </v-dic-form>
		<v-dic-data ref="dicDataRef"></v-dic-data>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import getTableData from '/@/utils/getTableData'
import request from '/@/api/develop/dic'
import VSearch from '/@/components/search/v-search.vue';
import VDicForm from './components/v-dic-form.vue';
import VDicData from './components/v-dic-data.vue';
export default defineComponent({
    components: {
        VSearch,
        VDicForm,
		VDicData,
    },
	setup() {
		type DicStatusType = {
			code: string;
			value: string;
		}

		const dicStatusList = ref<DicStatusType[]>()


		// 搜索关键字
		const searchObj = reactive({
			name: '',
			code: '',
			groupCode: '',
		})

        const formRef = ref<any>()
        const dicDataRef = ref<any>()

        const searchObjArr: any[] = [
			{
				label: '参数名称',
				key: 'name',
				slot: null,
				type: 'input',
				value: '',
			},
			{
				label: '唯一编码',
				key: 'code',
				slot: null,
				type: 'input',
				value: '',
			},
		];

        let tableDataObj = getTableData(request.getDicList, {}, searchObj, true, false)
        
        // 搜索
		const searchHandle = (params: any) => {
			searchObj.name = params.name;
			searchObj.code = params.code;
			searchObj.groupCode = params.groupCode;
			tableDataObj.searchHandle();
		};

		// 删除
        const deleteHandle = async (rows: any) => {
			await request.deleteHandle({id: rows.id})
			tableDataObj.getData()
        }

		// 提交
        const submitHandle = async (param: any) => {
			if (param.id) {
				await request.editHandle(param)
			} else {
				await request.addHandle(param)
			}
			tableDataObj.getData()
        }

        // 新增
        const addHandle = async (data?: {}) => {
            formRef.value.addNew(data)
        }
		// 打开弹框显示字典数据
		const dicDataHandle = (data: any) => {
			dicDataRef.value.dialogControl(data.id, dicStatusList.value)
		}

		// 获取字典状态列表
		const getSysDictTypeDropDown = async () => {
			let res = await request.sysDictTypeDropDown<DicStatusType[]>({ code: 'common_status' })
			console.log(res,'res')
			dicStatusList.value = res.data
		}

		// 获取对应的状态值
		const getStatusVal = (status: string | number) => {
			let filterArr = dicStatusList.value?.filter( item => {
				return item.code == status
			})
			return filterArr?.[0]?.value || ''
		}


		onMounted( () => {
			getSysDictTypeDropDown()
		})

		
        return {
            ...tableDataObj,
            ...toRefs(searchObj),
            searchObjArr,
            deleteHandle,
            submitHandle,
            addHandle,
            formRef,
			searchHandle,
			dicDataHandle,
			dicDataRef,
			getStatusVal,
        }
	},
});
</script>

<style lang="scss" scoped>
    :deep(.el-card__body) {
        height: 100%;
    }
</style>
